
import React, { Component } from "react";
import { connect } from "react-redux";
import { View, StyleSheet, TouchableOpacity, Text, Image } from "react-native";
import { TopBar } from "tuya-panel-kit";
import TYSdk from "../../api";
import dpCodes from "../../config/dpCodes";
import Strings from "../../i18n";
import Res from "../../res";



const {
  filter_life_level: filter_life_levelCode,
  filter_left_time: filter_left_timeCode,
  filter_life_level1: filter_life_level1Code,
  filter_left_time1: filter_left_time1Code,
} = dpCodes;

class FilterListScene extends Component {

  static defaultProps = {
    dpState: {},
  };

  constructor(props) {
    super(props);


    this.state = {
      showTop:true,
    };
  }

  async componentDidMount() {
    try {


    } catch (err) {
      console.warn(err);
    }
  }

 topView() {
  return (
    <TopBar.Container
      background="#FFFFFF"
      style={{ height: 88 }}
      contentStyle={{ height: TopBar.height, marginTop: 10 }}
    >
      <TopBar.Action size={20} source={Res.fback} color="#4C4C4C" onPress={() => TYSdk.Navigator.pop()} />
      <TopBar.Content />
    </TopBar.Container>
  );
}


  render() {
    const { filter_left_time, filter_left_time1 } = this.props;
    const { showTop } = this.state;
    const days = TYSdk.hoursToDays(filter_left_time);
    const days1 = TYSdk.hoursToDays(filter_left_time1);
    const time = days === 0 ? Strings.filter_expired : Strings.formatValue('filter_days', days);//'已过期' : days + '天';
    const time1 = days1 === 0 ? Strings.filter_expired : Strings.formatValue('filter_days', days1);//'已过期' : days1 + '天';

    return (
      <View style={[styles.container]}>
         {showTop ? this.topView() : null}
        <View style={{
          backgroundColor: "#FFFFFF",
          height: 100,
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-between"
        }}>
          {/* 滤材 */}
          <Text style={{ marginStart: 30, fontSize: 30, color: "#333333" }}>{Strings.filter_title}</Text>
        </View>

        {/* 物理滤材 */}
        <TouchableOpacity
          style={styles.cell}
          onPress={() => {
            TYSdk.Navigator.push({
              id: 'filterView',
              filterType: 0,
            });
          }}
        >
          <Text style={styles.cellTitle}>{Strings.filter_wuli_title}</Text>
          <View style={styles.oneLine}>
            <Text style={[styles.subTitle, { marginLeft: 20 }]}>{time}</Text>
            <Image style={styles.arrow} source={Res.enter} />
          </View>
        </TouchableOpacity>

        {/* 生化滤材 */}
        <TouchableOpacity
          style={styles.cell}
          onPress={() => {
            TYSdk.Navigator.push({
              id: 'filterView',
              filterType: 1,
            });
          }}
        >
          <Text style={styles.cellTitle}>{Strings.filter_shenghua_title}</Text>
          <View style={styles.oneLine}>
            <Text style={[styles.subTitle, { marginLeft: 20 }]}>{time1}</Text>
            <Image style={styles.arrow} source={Res.enter} />
          </View>
        </TouchableOpacity>


      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  cell: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "#fff",
    height: 60,
    marginStart: 30,
    marginEnd: 10,
    marginTop: 10,
    // width: '100%',
    borderRadius: 12
  },
  oneLine: {
    flexDirection: "row",
    alignItems: "center",
  },
  twoLines: {
    flexDirection: "column",
    alignItems: "stretch"
  },
  cellTitle: {
    fontSize: 16,
    fontWeight: "bold",
    color: "#000"
  },
  icon: {
    justifyContent: "center",
    marginStart: 20,
    width: 40,
    height: 40
  },
});

export default connect(({ dpState }) => ({
  dpState,
  filter_life_level: dpState[filter_life_levelCode],
  filter_left_time: dpState[filter_left_timeCode],
  filter_life_level1: dpState[filter_life_level1Code],
  filter_left_time1: dpState[filter_left_time1Code],
}))(FilterListScene);
